<template>
  <div>
    <!-- 
      1 . 部分请求回来的数据不完全，控制台会有报错
      2 . 相关推荐，请求回来的数据很多没有，控制台报错， 给了个请求超时
     -->
    <!-- 顶部操作导航 -->
    <div class="nav">
      <van-icon name="upgrade" class="icon" @click="back" v-if="!flage" />
      <van-icon name="upgrade" class="icon" @click="back2" v-if="flage" />
      <van-icon name="share-o" class="icon2" @click="share" />
    </div>
    <!-- 顶部轮播图 -->
    <div class="top">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banArr" :key="item.id">
          <!-- <img src="" alt=""> -->
          <img :src="item.img_url" alt="" class="img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品相关信息展示 -->
    <div class="center">
      <van-row type="flex" justify="space-between" class="text">
        <van-col span="8">
          <van-icon name="passed" class="icon" />
          30天无忧退货
        </van-col>
        <van-col span="8">
          <van-icon name="passed" class="icon" />
          48小时快速退费
        </van-col>
        <van-col span="8">
          <van-icon name="passed" class="icon" />
          满88元免邮费
        </van-col>
      </van-row>
      <div class="text2">
        <p class="one">
          {{ abtObj.goods_brief }}
        </p>
        <p class="two">
          {{ abtObj.name }}
        </p>
        <p class="three">
          {{ abtObj.retail_price | RMBformat }}
        </p>
      </div>
      <div class="text3">
        <!-- 产品相关1 -->
        <div>
          <p class="p">{{ attribute1.name }}</p>
          <div class="div">{{ attribute1.value }}</div>
        </div>
        <!-- 产品相关2 -->
        <div>
          <p class="p">{{ attribute2.name }}</p>
          <div class="div">{{ attribute2.value }}</div>
        </div>
        <!-- 请求回来的html数据 -->
        <!-- <div v-html="abtObj.goods_desc" class="goods_desc"> -->
        <div v-html="abtObj.goods_desc" class="goods_desc"></div>
      </div>
      <!-- 常见问题 -->
      <div class="issue">
        <van-divider :hairline="false">常见问题</van-divider>
        <div v-for="(item, index) in issue" :key="index">
          <p class="question">﹡{{ item.question }}</p>
          <p class="answer">
            {{ item.answer }}
          </p>
        </div>
      </div>
      <!-- 相关商品 -->
      <div>
        <van-divider :hairline="false">相关商品</van-divider>
        <div
          v-for="(item, index) in abtArr"
          :key="index"
          class="abtArr"
          @click="fn(item.id)"
        >
          <img :src="item.list_pic_url" alt="" />
          <h3>
            {{ item.name }}
          </h3>
          <p>
            {{ item.retail_price | RMBformat }}
          </p>
        </div>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <Action :abtObj="abtObj" :id="num" />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { Dialog, Toast } from "vant"; //////////
import { GetDetail, GetRelated, Getgory } from "../https/http";
import Action from "../components/Action";
export default {
  name: "About",
  methods: {
    onSelect(option) {
      console.log(option.name == "微信");
      if (option.name == "微博" || option.name == "微信") {
        Toast(`成功分享给${option.name}好友`);
      } else {
        Toast(`成功分享`);
      }
      this.showShare = false;
    },
    share() {
      console.log(123);
      this.showShare = true;
    },
    // 点击相关商品
    fn(value) {
      Toast.loading({
        message: "加载中...",
        duration: 300,
        // forbidClick: true,
      });
      // 获取商品信息
      GetDetail({ id: value })
        .then((res) => {
          console.log(res);
          this.banArr = res.data.gallery; //轮播图片路径数组
          this.abtObj = res.data.info; //商品名称 别名
          if (res.data.attribute[0]) {
            this.attribute1 = res.data.attribute[0]; //产品相关1
          } else {
            this.attribute1 = [];
          }
          if (res.data.attribute[1]) {
            this.attribute1 = res.data.attribute[1]; //产品相关1
          } else {
            this.attribute1 = [];
          }
          // this.attribute2 = res.data.attribute[1]; //产品相关1
          this.issue = res.data.issue;
          // 给子传的id
          this.num = res.data.productList[0].id;
          console.log(this.num);
        })
        .then(() => {
          // 获取相关商品的相关商品
          GetRelated({ id: value }).then((res) => {
            // console.log(222, res);
            this.abtArr = res.data.goodsList;
            document.documentElement.scrollTop = 0;
          });
        });
    },
    back() {
      if (this.$route.params.index) {
        Getgory({ id: this.$route.params.index }).then((res) => {
          console.log(res);
          // this.chanGe();
          this.$router.push({
            name: "banner",
            params: { data: res.data, index: this.$route.params.index },
          });
        });
      } else {
        this.$router.push({ name: "searchPopup" });
      }
      // let num = this.abtObj
      // console.log(num);
      // console.log();
    },
    back2() {
      console.log("执行到了则",this.$route);
      if (this.$route.params.num == 1) {
        this.$router.push({ name: "Cart" });
      } else {
        this.chanGe();
        this.$router.push({ name: "Home" });
      }
    },
    ...mapMutations(["chanGe"]),
  },
  created() {
    console.log(this.$route);
    // 获取商品详细信息
    GetDetail({ id: this.$route.params.id }).then((res) => {
      console.log(11, res);
      this.banArr = res.data.gallery; //轮播图片路径数组
      this.abtObj = res.data.info; //商品名称 别名
      if (res.data.attribute[0]) {
        this.attribute1 = res.data.attribute[0]; //产品相关1
      } else {
        this.attribute1 = [];
      }
      if (res.data.attribute[1]) {
        this.attribute1 = res.data.attribute[1]; //产品相关1
      } else {
        this.attribute1 = [];
      }
      // this.attribute2 = res.data.attribute[1]; //产品相关1
      this.issue = res.data.issue;
      // 给子传的id
      this.num = res.data.productList[0].id;
      console.log(this.num);
    });
    // 获取相关商品信息
    GetRelated({ id: this.$route.params.id }).then((res) => {
      // console.log(222, res);
      this.abtArr = res.data.goodsList;
    });
  },
  data() {
    return {
      flage: this.$route.params.onoff,
      // flage2:!this.flage,
      banArr: [],
      abtObj: {},
      attribute1: [],
      attribute2: [],
      issue: [],
      abtArr: [],
      num: 0,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  components: {
    Action,
  },
};
</script>

<style scoped lang="less">
.nav {
  position: fixed;
  top: 6px;
  left: 6px;
  width: 100%;
  background: none;
  z-index: 10;
  font-size: 30px;
  .icon {
    transform: rotateZ(-90deg);
  }
  .icon2 {
    position: absolute;
    top: 0px;
    right: 14px;
  }
}
.top {
  img {
    width: 100%;
    height: 100%;
  }
}
.center {
  .text {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
    .icon {
      color: red;
    }
  }
  .text2 {
    text-align: center;
    font-size: 14px;
    .one {
      margin: 10px 0px;
    }
    .two {
      font-weight: 100;
    }
    .three {
      color: red;
    }
    p {
      margin: 8px 0px;
    }
  }
  .text3 {
    font-size: 14px;
    .p {
      text-align: center;
      display: block;
      width: 100%;
      height: 25px;
      line-height: 25px;
      background: #efefef;
    }
    .div {
      margin: 8px 0px 8px 0px;
      box-sizing: border-box;
      padding-left: 10px;
      line-height: 17px;
    }
  }
  /deep/.goods_desc {
    img {
      width: 100% !important;
      height: auto !important;
    }
  }
  .issue {
    font-size: 15px;
    .question {
      font-weight: 600;
      margin: 8px 0px;
    }
    .answer {
      box-sizing: border-box;
      padding-left: 10px;
      line-height: 20px;
    }
  }
  .abtArr {
    // display: flex;
    width: 50%;
    height: 200px;
    float: left;
    margin-bottom: 15px;
    img {
      width: 100%;
      height: 100%;
    }
    h3 {
      font-weight: 500;
      text-align: center;
    }
    p {
      text-align: center;
      margin-top: 15px;
      color: red;
    }
  }
}
</style>